import React from 'react'
import PropTypes from 'prop-types';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
        padding: "30px 0",
    },
    typography: {
        textAlign: "center",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "24px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "normal",
        textTransform: "uppercase",
        color: "rgba(30, 30, 30, 1)",
        [theme.breakpoints.up('md')]: {
            fontSize: "30px",
        },
    },
}));

const TitleText = ({ text, color }) => {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <Typography className={classes.typography} style={{ color: color ? color : "#000" }}>
                {text}
            </Typography>
        </div>
    )
}


TitleText.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default TitleText
